<template>
  <div class="home">
    <h1>{{ num }}</h1>
    <button @click="add">改变num</button>
  </div>
</template>

<script>
import { ref } from "vue";
export default {
  setup() {
    const num = ref(10);
    console.log(num);
    //num是一个对象 当一个对象是常量的时候 里面值改变就不会报错 所以这里可以用const 并且建议用const
    const add = function () {
      num.value++;
    };
    //用ref定义的变量如果在setup中使用要加value，在模版中使用就不用加value

    return { num, add };
    //定义的变量和方法都要return才能用
  },
  //入口函数  在vue3中基本上所有的代码都放在这里
};
</script>
